<%@page contentType="text/html; charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户信息修改</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="keywords" content="" />
	<meta http-equiv="description" content="" />
	<link href="${ctx}/css/main.css" rel="stylesheet" type="text/css" />
	<link href="${ctx}/js/jscalendar/skins/aqua/theme.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/js/easyui/themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/js/easyui/themes/icon.css"/>
	<style type="text/css">
		#main{
			width:80%;
		}
	</style>
	<script type="text/javascript" src="${ctx}/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.validate.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.metadata.js"></script>
	<script type="text/javascript" src="${ctx}/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jscalendar/calendar.js"></script>
	<script type="text/javascript" src="${ctx}/js/jscalendar/lang/cn_utf8.js"></script>
	<script type="text/javascript" src="${ctx}/js/jscalendar/calendar-setup.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#sub').removeAttr('disabled');

			$.validator.setDefaults({
				submitHandler: function(form) {
					$('#sub').attr('disabled','disabled');
					form.submit();
				},
				meta: "validate",
				ignoreTitle: true//解决与google Toolbar的冲突
			});
			jQuery.validator.addMethod("ageReg", function(value, element) {
				var ageReg = /^\d+$/;
				if (!$.trim(value)) {
					return false;
				} else {
					if (parseInt($.trim(value)) < 0) {
						return false;
					}
					return this.optional(element) || (ageReg.test(value));
				}
			   
			}, "请正确填写年龄");
			$('#theform').validate({
				rules:{
					'user.name':{
							required:true,
							rangelength:[4,16]
						},
					'user.birthday':{
							required:true
						},
					'user.age':{
							ageReg:true,
							maxlength:2
						}
					
				},
				messages:{
					'user.age':{
							ageReg:'请正确填写年龄',
							maxlength:'年龄最多2位数字'
						},
					'user.birthday':{
							required:'出生日期为必填项'
						}
				},
				success: function(label) {
					label.addClass('valid').html("<img src='${ctx}/images/ok.gif' border='0'/>");
				},
				ignore: '.ignore'
			});
			Calendar.setup(
			    {
			      inputField  : "birthday",    // ID of the input field
			      ifFormat    : "%Y-%m-%d",   // the date format
			      button      : "birthdayTrigger",      // ID of the button
			      showsTime   : false,
			      date		  : Calendar.initNewDate(),
			      timeFormat  : "24"     
			    }
			  );
			  //计算年龄
			  autoCountAge();
		});	
		
		
		//自动计算年龄
		function autoCountAge() {
			var birth = $('#birthday').val();
			if (birth) {
				var birthArray = birth.split('-');
				if (birthArray.length == 3) {
					var currentDate = new Date();
					var birthDate = new Date();
					var year = parseInt(currentDate.getFullYear(),10) -  parseInt(birthArray[0],10); 
					birthDate.setFullYear(currentDate.getFullYear());
					birthDate.setMonth(parseInt(birthArray[1],10) - 1);
					birthDate.setDate(birthArray[2]);
					if (currentDate.getTime() < birthDate.getTime()) {
						year--;
					}
					if (year < 0) {
						year = 0;
					}
					$('#age').val(year);
				}
			}
		}
	</script>
  </head>
  <body>
  	<div id="main">
   		<div class="titlediv">您所在的位置：用户信息修改</div>
    	<div id="content" class="margin_10">
    	<form id="theform" action="${ctx}/changeInfoSubmit.do" method="post">
    		<input type="hidden" name="ticket" value="${ticket}"/>
    		<input type="hidden" name="callback" value="${callback}"/>
    		<div id="form">
	    		<table cellpadding="0" cellspacing="0" border="0" style="width:50%" class="querytab">
	    			<tr>
		    			<td class="alignright">用户名：</td><td class="alignleft">${user.username}</td>
		    		</tr>
	    			<tr>
	    				<td class="alignright"><span class="red spanmargin">*</span><span>真实姓名：</span></td>
	    				<td class="alignleft"><input id="name" type="text" readonly="readonly" name="user.name" value="${user.name}" maxlength="16"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span class="red spanmargin">*</span><span>出生日期：</span></td>
	    				<td class="alignleft"><input type="text" readonly="readonly" onchange="autoCountAge()" id="birthday" name="user.birthday" size="20" value="<fmt:formatDate value='${user.birthday}' pattern='yyyy-MM-dd'/>"/><input type="button" id="birthdayTrigger" value="选择"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>年龄：</span></td>
	    				<td class="alignleft"><input type="text" id="age" name="user.age" value="${user.age}" maxlength="4"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>性别：</span></td>
	    				<td class="alignleft"><s:select list="sexTypes" listValue="name" listKey="value" name="sexTypeValue" value="%{user.sex.value}"></s:select></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>民族：</span></td>
	    				<td class="alignleft"><input id="name" type="text" name="user.nation" value="${user.nation}" maxlength="16"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>文化程度：</span></td>
	    				<td class="alignleft"><s:select list="educationDegreeTypes" listValue="name" listKey="value" name="educationDegreeTypeValue" value="%{user.educationDegree.value}"></s:select></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>毕业院校：</span></td>
	    				<td class="alignleft"><input id="name" type="text" name="user.university" value="${user.university}" maxlength="30"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>婚姻状况：</span></td>
	    				<td class="alignleft"><s:select list="maritalStatuses" listValue="name" listKey="value" name="maritalStatusValue" value="%{user.maritalStatus.value}"></s:select></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>手机：</span></td>
	    				<td class="alignleft"><input id="name" type="text" readonly="readonly" name="user.mobile" value="${user.mobile}" maxlength="16"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>电话：</span></td>
	    				<td class="alignleft"><input id="name" type="text" readonly="readonly" name="user.tel" value="${user.tel}" maxlength="16"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>邮箱：</span></td>
	    				<td class="alignleft"><input id="name" type="text" readonly="readonly" name="user.email" value="${user.email}" maxlength="50"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>QQ：</span></td>
	    				<td class="alignleft"><input id="name" type="text" name="user.qq" value="${user.qq}" maxlength="16"/></td>
	    			</tr>
	    			<tr>
	    				<td class="alignright"><span>微博：</span></td>
	    				<td class="alignleft"><input id="name" type="text" name="user.weibo" value="${user.weibo}" maxlength="40"/></td>
	    			</tr>
	    		</table>
    		</div>
    		<div id="foot"><center><input id="sub" type="submit" value="提交 "/></center></div>
    		<div class="margin_10">&nbsp;</div>
    	</form>
    	</div>
    </div>
  </body>
</html>
